<template>
  <a-dropdown :trigger="['click']" placement="bottom">
    <a class="ant-dropdown-link" @click.prevent>
      <TranslationOutlined style="font-size: 24px" />
    </a>
    <template #overlay>
      <a-menu style="width: 100px">
        <a-menu-item
          v-for="item in languageList"
          :key="item.value"
          :disabled="language === item.value"
          @click="changeLanguage(item.value)"
        >
          {{ item.label }}
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script lang="ts" setup>
import { TranslationOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
import { useGlobalStore } from '@/store/modules/global';
import { LanguageType } from '@/store/interface';

const i18n = useI18n();
const globalStore = useGlobalStore();
const language = computed(() => globalStore.language);

const languageList = [
  { label: '中文', value: 'zh' },
  { label: 'English', value: 'en' },
];

const changeLanguage = (lang: string) => {
  i18n.locale.value = lang;
  globalStore.changeGlobal(lang as LanguageType);
};
</script>

<style lang="scss" scoped></style>
